<template>
  <div class="industry-data">
    <div v-for="(item ,index) of industryList" :key="index" class="industry-item" @click="toDetail(item)">
      <div
        v-if="item.coverImage"
        :style="`width: 386px; height: 200px; background: url(${item.coverImage}) no-repeat center; background-size: cover`"
      ></div>
      <img v-else :src="DefaultBg" />
      <div class="content">
        <el-tooltip :content="item.reportTitle" placement="bottom-start" effect="light">
          <p class="item-title">
            {{item.reportTitle}}
          </p>
        </el-tooltip>
        <div class="item-type">
          <span class="part" v-for="(sItem, index) of getLabels(item.reportLabels)" :key="index">{{sItem}}</span>
        </div>
        <div class="item-info">
          <span>{{item.reportDate}}</span>
        </div>
      </div>

      <div class="delete-btn" @click.stop="deleteItem(item)" v-has-permi="['wiki:report:remove']"></div>
    </div>

    <div class="empty-box" v-if="!industryList.length">
      <el-empty />
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {useRouter} from "vue-router";
import {delReport, listReport} from "@/api/industryReport";
import {ReportVO} from "@/api/industryReport/types";
import {reportLabelsList} from "@/api/reportLabels";
import DefaultBg from './assets/default-bg.png';

const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['finish']);
const router = useRouter();
const industryList = ref<ReportVO[]>([]);
const reportLabelsData = ref<{id: string, labels: string}[]>([]);

function toDetail(item: any) {
  router.push({
    name: 'industryDetail',
    query: {id:item.id, isOriginal: item.isOriginal}
  })
}

async function deleteItem(item: any) {
  try {
    await proxy?.$modal.confirm('确认要删除该条行业报告吗？');
    const data = await delReport(item.id)
    if (data.code === 200) proxy?.$modal.msgSuccess('删除成功')
    getData()
  } catch {
    console.log('取消')
  }
}

function getLabels(labels: string) {
  const arr = labels.split(',');
  const _labels: string[] = [];
  reportLabelsData.value.forEach((item) => {
    if (arr.includes(item.id)) _labels.push(item.labels)
  })
  return _labels;
}

function getData(query?: Record<string, any>) {
  industryList.value = [];
  listReport(query).then((res) => {
    industryList.value = res.rows || []
  }).finally(() => emit('finish'))
}

function getReportLabelsData() {
  reportLabelsList('').then((res: any) => {
    reportLabelsData.value = res.rows || [];
  })
}


getData()
getReportLabelsData()

defineExpose({ getData })

defineComponent({name: 'IndustryData'})
</script>

<style scoped lang="scss">
.industry-data {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .empty-box {
    width: 100%;
    height: 100%;
  }

  .industry-item {
    position: relative;
    width: 386px;
    margin-right: 16px;
    margin-bottom: 16px;
    cursor: pointer;
    background-color: #fff;

    &:hover .delete-btn {
      display: block;
    }

    .delete-btn {
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 40px;
      display: none;
      background: url('@/assets/delete.png') no-repeat center;
    }

    .content {
      padding: 15px 20px;
      background-color: #fff;
    }

    .item-title {
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 24px;
      color: #2E3244;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .item-type {
      margin-bottom: 22px;

      .part {
        display: inline-block;
        margin-right: 6px;
        padding: 2px 4px;
        font-size: 12px;
        color: #92A4FA;
        background: #F3F5FF;
        border-radius: 10px;
      }
    }

    .item-remark {
      font-size: 14px;
      color: #666;
    }

    .item-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
      font-size: 12px;
      color: #2E3244;

      .info-num {
        width: 38px;
        height: 38px;
        text-align: center;
        line-height: 34px;
        background: #eee;
        border: 2px solid #fff;
        border-radius: 50%;
      }
    }
  }
}
</style>
